<template>
  <div class="activation-page">
    <div class="header">
      <h1 class="title">粤歌学唱</h1>
    </div>

    <div class="content">
      <div class="input-container">
        <input 
          type="tel" 
          class="phone-input" 
          placeholder="请输入购买时的手机号"
          v-model="phone"
          maxlength="11"
        />
      </div>

      <button class="activate-button" @click="handleActivate">
        立即激活
      </button>
      
      <div class="bottom-actions">
        <button class="free-trial-button" @click="handleFreeTrial">
          免费试用
        </button>
        <button class="buy-now-button" @click="handleBuyNow">
          立即购买
        </button>
      </div>
      
      <div class="customer-service">
        <div class="cs-link" @click="contactCustomerService">
          <svg viewBox="0 0 24 24" width="20" height="20" class="cs-icon">
            <path fill="currentColor" d="M12,1C7,1,3,5,3,10v7c0,1.7,1.3,3,3,3h1v-8H5c0-3.9,3.1-7,7-7s7,3.1,7,7h-2v8h1c1.7,0,3-1.3,3-3v-7C21,5,17,1,12,1z"/>
            <path fill="currentColor" d="M7,12v6c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-6c0-1.1-0.9-2-2-2h0C7.9,10,7,10.9,7,12z"/>
            <path fill="currentColor" d="M15,12v6c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-6c0-1.1-0.9-2-2-2h0C15.9,10,15,10.9,15,12z"/>
          </svg>
          <span>联系客服</span>
        </div>
        <div class="cs-time">
          服务时间: 周一至周日 9:00-22:00
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const phone = ref('')

const handleActivate = () => {
  if (!validatePhone(phone.value)) {
    ElMessage({
      message: '请输入正确的手机号',
      type: 'warning',
      duration: 2000,
      customClass: 'custom-message'
    })
    return
  }
  
  ElMessage({
    message: '激活成功！',
    type: 'success',
    duration: 2000,
    customClass: 'custom-message'
  })
  
  // 延迟跳转到首页
  setTimeout(() => {
    router.push('/')
  }, 1500)
}

const handleFreeTrial = () => {
  // 设置免费试用标记
  localStorage.setItem('isFreeTrial', 'true')
  // 跳转到歌曲列表页面
  router.push('/songlist')
}

const handleBuyNow = () => {
  router.push('/vip')
}

const contactCustomerService = () => {
  ElMessage({
    message: '客服热线: 400-123-4567',
    type: 'info',
    duration: 3000,
    customClass: 'custom-message'
  })
}

const validatePhone = (phone) => {
  const reg = /^1[3-9]\d{9}$/
  return reg.test(phone)
}
</script>

<style scoped>
.activation-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #1e1935 0%, #111020 100%);
  color: white;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

.header {
  padding-top: max(50px, env(safe-area-inset-top));
  text-align: center;
  margin-bottom: 40px;
}

.title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
}

.input-container {
  margin-bottom: 20px;
}

.phone-input {
  width: 100%;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 10px;
  color: white;
  padding: 0 15px;
  font-size: 16px;
  outline: none;
}

.phone-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.activate-button {
  height: 54px;
  background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 200px;
  transition: all 0.2s ease;
}

.activate-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.bottom-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 30px;
}

.free-trial-button, .buy-now-button {
  flex: 1;
  height: 54px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.free-trial-button {
  background: transparent;
  border: 1px solid rgba(139, 92, 246, 0.5);
  color: rgba(255, 255, 255, 0.9);
}

.free-trial-button:hover {
  border-color: rgba(139, 92, 246, 0.8);
  background: rgba(139, 92, 246, 0.1);
}

.buy-now-button {
  background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
  border: none;
  color: white;
}

.buy-now-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.customer-service {
  text-align: center;
  margin-bottom: max(30px, env(safe-area-inset-bottom));
}

.cs-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8B5CF6;
  font-size: 15px;
  margin-bottom: 12px;
  cursor: pointer;
}

.cs-icon {
  margin-right: 6px;
}

.cs-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* 自定义消息提示样式 */
:global(.custom-message) {
  background-color: rgba(45, 56, 120, 0.95) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  color: white !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  font-size: 16px !important;
  padding: 12px 20px !important;
  min-width: 120px !important;
  text-align: center !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9999 !important;
}
</style> 